import React, { useState } from 'react';
import Breadcrumb from 'components/common/Breadcrumb';
import './index.less';
import { Row, Col, Select, DatePicker, Button } from 'antd';
import { IArea, getAllArea } from 'api/Area';
import { useRequest } from 'ahooks';
import moment from 'moment';
import { getOperateList } from 'api/OperateLog';
import renderAsyncTable from 'components/hooks/useAsyncTable';

const { Option } = Select;
const { RangePicker } = DatePicker
const EventRecord = () => {
    const { data: areas = [] } = useRequest(getAllArea);
    const columns = [
        {

        }
    ]
    const getTableData = (data: any) => getOperateList(data);
    const [queryParams, setQueryParams] = useState<any>()
    const asyncTable = renderAsyncTable(columns, getTableData, queryParams)
    return (
        <div className="operation-record">
            <Breadcrumb crumbs={['智能管控', '异常事件录像']}></Breadcrumb>
            <Row justify="end" align="middle" gutter={20} className="mb20">
                <Col span={4} className="text-right pr10">路桩区域：</Col>
                <Col span={4}>
                    <Select style={{ width: '100%' }}>
                        <Option value="all">全部：</Option>
                        {areas.map((area: IArea) => (
                            <Option key={area.id} value={area.id || ''}>
                                {area.name}
                            </Option>
                        ))}
                    </Select>
                </Col>
                <Col span={2} className="text-right pr10">
                    时间：
                </Col>
                <Col span={5} >
                    <RangePicker 
                    ranges={{
                        '今天': [moment(), moment()],
                        '本月': [moment().startOf('month'), moment().endOf('month')],
                      }}
                      showTime
                      format="YYYY/MM/DD HH:mm:ss">
                    </RangePicker>
                </Col>
                <Col span={2}>
                    <Button>搜索</Button>
                </Col>
            </Row>
            { asyncTable }
        </div>
    );
};
export default EventRecord;
